<template>
  <div class="videocontainer">
    <el-container>
      <el-aside width="200px">
      
        <el-menu style="width:80%;" class="el-menu-vertical-demo">
          <div v-for="item in fenqulist" :key="item.partionId">
            <router-link :to="pindaoUrl+item.partionId">
              <el-menu-item
                @click="sendate(item)"
              >{{item.partionName}}</el-menu-item>
            </router-link>
          </div>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <p class="fenqutitle" style="font-size:24px;font-style:inherit;">{{fenqutitle}}</p>
        </el-header>
        <el-divider></el-divider>
        <el-main>
          <div class="bili-video-card is-rcmd" data-report="tianma.1-1-1.click" data-v-f51aa350>
            <ul class="list">
              <li
                v-for="item in videoList"
                :key="item.videoId"
                class="list-item"
                style="float:left"
              >
                <pindaovideoevery :video="item" />
              </li>
            </ul>

            <div style="padding:60px;float:right">
              <!-- :current-page.sync="currentPage" 需要添加.sync，否则点击标签时失效 -->
              <el-pagination
                @size-change="getVideoByPartId"
                @current-change="getVideoByPartId"
                :current-page.sync="currentPage"
                :page-sizes="[20, 50, 100,500]"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import pindaovideoevery from "@/views/pindao/pindaovideoevery";
export default {
  name: "pindao",
  data() {
    return {
      count: 10,
      loading: false,
      fenqutitle: "全部频道",
      fenqulist: [
        {
          partionId: "1712489300190429184",
          partionName: "游戏",
          partionType: "video",
          createId: "1711410731683020800",
          createCode: "56292976232",
          createName: "bprogram",
          createTime: "2023-10-12T23:24:00",
          updateId: null,
          updateCode: null,
          updateName: null,
          updateTime: "2023-10-12T23:24:00"
        },
        {
          partionId: "1712489342825529344",
          partionName: "动漫",
          partionType: "video",
          createId: "1711410731683020800",
          createCode: "56292976232",
          createName: "bprogram",
          createTime: "2023-10-12T23:24:10",
          updateId: null,
          updateCode: null,
          updateName: null,
          updateTime: "2023-10-12T23:24:10"
        },
        {
          partionId: "1712489388258230272",
          partionName: "搞笑",
          partionType: "video",
          createId: "1711410731683020800",
          createCode: "56292976232",
          createName: "bprogram",
          createTime: "2023-10-12T23:24:21",
          updateId: null,
          updateCode: null,
          updateName: null,
          updateTime: "2023-10-12T23:24:21"
        }
      ],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      videoList: "",
      pindaoUrl: "/pindao/"
    };
  },
  computed: {},
  components: {
    pindaovideoevery
  },
  created() {
    this.getPartList();
  },
  methods: {
  
    getVideoByPartId(partId) {
      
      this.axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          partId: this.$route.params.partId==="0"?"":this.$route.params.partId,
          videoTitle: ""
        },
        url: "http://localhost:8094/video/getPageVideo"
      })
        .then(res => {
          this.videoList = res.data.records;
          this.total = res.data.total;
          console.log("this.videoList", this.videoList);
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },

    //动态更改分区标题
    sendate(item) {
      this.fenqutitle = item.partionName;
      this.getVideoByPartId(item.partionId);
    },
    getPartList() {
      this.axios({
        method: "post",
        params: {
          currentPage: 1,
          pageSize: 1000,
          type: "video"
        },
        url: "http://localhost:8092/partion/getPartionList"
      })
        .then(res => {
          this.fenqulist = res.data;
          this.getVideoByPartId();
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
.videocontainer {
  background-color: white;
  width: 90%;
  position: relative;
  top: 30px;
  left: 80px;
}

.fenqutitle {
  padding-top: 30px;
}
.list-item {
  padding: 8px;
}
.list {
  width: 100%;
}
</style>